<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col><el-button type="primary" @click="showAddCateDialog">添加分类</el-button></el-col>
			</el-row>
			<!-- 表格 -->
			<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
				<!-- 是否有效 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-check" v-if="scope.row.cat_deleted === false"></i>
					<i class="el-icon-close" v-else></i>
				</template>
				<!-- 排序 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag type="warning" size="mini" v-else>三级</el-tag>
				</template>
				<!-- 操作 opt-->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" @click="showeditCateDialog(scope.row.cat_id)">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除</el-button>
				</template>
			</tree-table>
			<!-- 分页 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[3, 5, 15, 20]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>
		<!-- 添加分类对话框 -->
		<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClose">
			<!-- 表单 -->
			<el-form ref="addCateformRef" :model="addCateform" :rules="addCateformRules" label-width="100px">
				<el-form-item label="分类名称:" prop="cat_name"><el-input v-model="addCateform.cat_name"></el-input></el-form-item>
				<el-form-item label="父级分类:">
					<el-cascader
						class="{'el-cascader-panel'}"
						v-model="selectKeys"
						:options="parentCateList"
						:props="cascaderProps"
						@change="parentCateChanged"
						clearable
					></el-cascader>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCate">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑分类对话框 -->
		<el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%" @close="editCateDialogClose">
			<!-- 表单 -->
			<el-form ref="editCateformRef" :model="editCateform" :rules="editCateformRules" label-width="100px">
				<el-form-item label="编辑名称:" prop="cat_name"><el-input v-model="editCateform.cat_name"></el-input></el-form-item>
				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editCateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editCate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//查询条件
			queryInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5
			},
			cateList: [],
			total: 0,
			columns: [
				{ label: '分类名称', prop: 'cat_name' },
				{
					label: '是否有效',
					type: 'template',
					template: 'isok'
				},
				{
					label: '排序',
					type: 'template',
					template: 'order'
				},
				{
					label: '操作',
					type: 'template',
					template: 'opt'
				}
			],
			addCateDialogVisible: false,
			addCateform: {
				cat_name: '',
				cat_pid: 0,
				cat_level: 0
			},
			addCateformRules: {
				cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
			},
			parentCateList: [],
			cascaderProps: {
				value: 'cat_id',
				label: 'cat_name',
				children: 'children',
				expandTrigger: 'hover',
				checkStrictly: true
			},
			selectKeys: [],
			//编辑
			editCateDialogVisible:false,
			editCateform:{},
			editCateformRules:{},

		};
	},
	created() {
		this.getCateList();
	},
	methods: {
		async getCateList() {
			const { data: res } = await this.$http.get('categories', { params: this.queryInfo });
			if (res.meta.status !== 200) {
				userinfo.mg_state = !userinfo.mg_state;
				return this.$message.error('获取商品失败！');
			}
			// console.log(res.data);
			this.cateList = res.data.result;
			this.total = res.data.total;
		},
		//监听 pagesize
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize;
			this.getCateList();
		},
		//监听 pagenum
		handleCurrentChange(newPage) {
			this.queryInfo.pagenum = newPage;
			this.getCateList();
		},
		//展示添加的对话框
		showAddCateDialog() {
			this.getParentCateList();
			this.addCateDialogVisible = true;
		},
		//获取父级分类的数据列表
		async getParentCateList() {
			const { data: res } = await this.$http.get('categories', { params: { type: 2 } });
			if (res.meta.status !== 200) {
				return this.$message.error('获取父级分类失败！');
			}
			// console.log(res.data);
			this.parentCateList = res.data;
		},
		parentCateChanged() {
			// console.log(this.selectKeys);
			if (this.selectKeys.length > 0) {
				this.addCateform.cat_pid = this.selectKeys.unshift();
				this.addCateform.cat_level = this.selectKeys.length;
				return;
			} else {
				this.addCateform.cat_pid = 0;
				this.addCateform.cat_level = 0;
			}
		},
		addCate() {
			// console.log(this.addCateform);
			this.$refs.addCateformRef.validate(async v=>{
				if (!v) return;

				const { data: res } = await this.$http.post('categories', this.addCateform);
				if (res.meta.status !== 201) {
					return this.$message.error('添加分类失败');
				}
				this.$message.success('添加分类成功！');
				this.addCateDialogVisible = false;
				this.getCateList();
			})
		},
		addCateDialogClose(){
			this.$refs.addCateformRef.resetFields()
			this.selectKeys= []
			this.addCateform.cat_pid = 0
			this.addCateform.cat_level = 0
		},

		//编辑
		async showeditCateDialog(id){
			const { data: res } = await this.$http.get('categories/' + id);
			if (res.meta.status !== 200) {
				return this.$message.error('查询用户失败');
			}
			this.editCateform = res.data
			this.editCateDialogVisible=true
		},
		editCateDialogClose(){
			this.$refs.editCateformRef.resetFields();
		},
		editCate(){
			console.log(this.Id + this.catName);
			this.$refs.editCateformRef.validate(async v => {
				if (!v) return;
			
				const { data: res } = await this.$http.put('categories/' + this.editCateform.cat_id, {cat_name: this.editCateform.cat_name});
				if (res.meta.status !== 200) {
					return this.$message.error('编辑提交失败');
				}
				this.$message.success('编辑提交成功！');
				this.editCateDialogVisible = false;
				this.getCateList();
			});
		},
		async removeCateById(id){
			console.log(id)
			const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).catch(err => err);
			if (confirmResult !== 'confirm') {
				return this.$message.info('已取消删除');
			}
			const { data: res } = await this.$http.delete('categories/' + id);
			if (res.meta.status !== 200) {
				return this.$message.error('删除分类失败');
			}
			this.$message.success('删除分类成功！');
			this.getCateList();
		}
	}
};
</script>

<style lang="less" scoped>
.treeTable {
	margin-top: 0.9375rem;
}
.el-scrollbar__wrap {
	height: 300px !important;
}
</style>
